<!--
 * @FileDescription 基本配置
 * @Author 杨宇翔
 * @Date 20220531 10:48:12
 * @LastEditors 杨宇翔
 * @LastEditTime 20220531 10:48:12
-->
<template>
    <div class="base-configuration">
        <div class="container">
            <div class="header">
                <span>基本配置</span>
                <span class="material-icons" @click="BaseInformationComponent.Default.ResetAsync()">refresh</span>
                <span class="material-icons" @click="UsageComponent.Default.NavigateToPreviousAsync()">×</span>
            </div>
            <div class="content">
                <table>
                    <thead>
                        <th>配置项目</th>
                        <th>是否配置</th>
                        <th>配置值</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>永久存储</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="永久存储开关" hidden
                                    v-model="configuration.StoreInNVMValid">
                                <label for="永久存储开关">
                                    <img
                                        :src="configuration.StoreInNVMValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="永久存储" v-model="configuration.StoreInNVM">
                                    <option :value="true" selected>激活</option>
                                    <option :value="false">未激活</option>
                                </select> -->

                                <UseDropdown class="dropdown"
                                    :Options="new Map<boolean, string>([[true, '激活'], [false, '未激活']])"
                                    v-model="configuration.StoreInNVM" />
                            </td>
                        </tr>

                        <tr>
                            <td>雷达ID</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="雷达ID开关" hidden
                                    v-model="configuration.SensorIDValid">
                                <label for="雷达ID开关">
                                    <img
                                        :src="configuration.SensorIDValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="雷达ID" v-model="configuration.SensorID">
                                    <option :value="0" selected>00</option>
                                </select> -->
                                <UseDropdown class="dropdown" :Options="new Map<number, string>([[0, '00']])"
                                    v-model="configuration.SensorID" />
                            </td>
                        </tr>

                        <tr>
                            <td>检测目标类型</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="检测目标类型开关" hidden
                                    v-model="configuration.OutputTypeValid">
                                <label for="检测目标类型开关">
                                    <img
                                        :src="configuration.OutputTypeValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="检测目标类型" v-model="configuration.OutputType">
                                    <option :value="0" selected>无</option>
                                    <option :value="1">Objects</option>
                                    <option :value="2">Clusters</option>
                                </select> -->
                                <UseDropdown class="dropdown"
                                    :Options="new Map<number, string>([[0, '无'], [1, 'Objects'], [2, 'Clusters']])"
                                    v-model="configuration.OutputType" />
                            </td>
                        </tr>

                        <tr>
                            <td>最大检测距离</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="最大检测距离开关" hidden
                                    v-model="configuration.MaxDistanceValid">
                                <label for="最大检测距离开关">
                                    <img
                                        :src="configuration.MaxDistanceValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <input class="colorblack" type="number" name="基本配置" id="最大检测距离" min="0" max="1200"
                                    step="2" v-model.lazy="configuration.MaxDistance" />
                            </td>
                        </tr>

                        <tr>
                            <td>雷达功率</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="雷达功率开关" hidden
                                    v-model="configuration.RadarPowerValid">
                                <label for="雷达功率开关">
                                    <img
                                        :src="configuration.RadarPowerValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="雷达功率" v-model="configuration.RadarPower">
                                    <option :value="0" selected>标准</option>
                                    <option :value="1">-3dB发射增益</option>
                                    <option :value="2">-6dB发射增益</option>
                                    <option :value="3">-9dB发射增益</option>
                                </select> -->
                                <UseDropdown class="dropdown"
                                    :Options="new Map<number, string>([[0, '标准'], [1, '-3dB发射增益'], [2, '-6dB发射增益'], [3, '-9dB发射增益']])"
                                    v-model="configuration.RadarPower" />
                            </td>
                        </tr>

                        <tr>
                            <td>发送目标质量信息</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="发送目标质量信息开关" hidden
                                    v-model="configuration.SendQualityValid">
                                <label for="发送目标质量信息开关">
                                    <img
                                        :src="configuration.SendQualityValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="发送目标质量信息" v-model="configuration.SendQuality">
                                    <option :value="true" selected>激活</option>
                                    <option :value="false">未激活</option>
                                </select> -->

                                <UseDropdown class="dropdown"
                                    :Options="new Map<boolean, string>([[true, '激活'], [false, '未激活']])"
                                    v-model="configuration.SendQuality" />
                            </td>
                        </tr>

                        <tr>
                            <td>发送目标扩展信息</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="发送目标扩展信息开关" hidden
                                    v-model="configuration.SendExtInfoValid">
                                <label for="发送目标扩展信息开关">
                                    <img
                                        :src="configuration.SendExtInfoValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="发送目标扩展信息" v-model="configuration.SendExtInfo">
                                    <option :value="true" selected>激活</option>
                                    <option :value="false">未激活</option>
                                </select> -->

                                <UseDropdown class="dropdown"
                                    :Options="new Map<boolean, string>([[true, '激活'], [false, '未激活']])"
                                    v-model="configuration.SendExtInfo" />
                            </td>
                        </tr>

                        <tr>
                            <td>控制继电器</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="控制继电器开关" hidden
                                    v-model="configuration.CtrlRelayValid">
                                <label for="控制继电器开关">
                                    <img
                                        :src="configuration.CtrlRelayValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="控制继电器" v-model="configuration.CtrlRelay">
                                    <option :value="true" selected>激活</option>
                                    <option :value="false">未激活</option>
                                </select> -->

                                <UseDropdown class="dropdown"
                                    :Options="new Map<boolean, string>([[true, '激活'], [false, '未激活']])"
                                    v-model="configuration.CtrlRelay" />
                            </td>
                        </tr>

                        <tr>
                            <td>排序方式</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="排序方式开关" hidden
                                    v-model="configuration.SortIndexValid">
                                <label for="排序方式开关">
                                    <img
                                        :src="configuration.SortIndexValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="排序方式" v-model="configuration.SortIndex">
                                    <option :value="0" selected>未排序</option>
                                    <option :value="1">按距离排序</option>
                                    <option :value="2">按RCS排序</option>
                                </select> -->

                                <UseDropdown class="dropdown"
                                    :Options="new Map<number, string>([[0, '未排序'], [1, '按距离排序'], [2, '按RCS排序']])"
                                    v-model="configuration.SortIndex" />
                            </td>
                        </tr>

                        <tr>
                            <td>雷达灵敏度</td>
                            <td>
                                <input type="checkbox" name="基本配置" id="雷达灵敏度开关" hidden
                                    v-model="configuration.RCSThresholdValid">
                                <label for="雷达灵敏度开关">
                                    <img
                                        :src="configuration.RCSThresholdValid ? `/static/MMWR/switch_on.png` : '/static/MMWR/switch_off.png'">
                                </label>
                            </td>
                            <td>
                                <!-- <select name="基本配置" id="雷达灵敏度" v-model="configuration.RCSThreshold">
                                    <option :value="false" selected>标准灵敏度</option>
                                    <option :value="true">高灵敏度</option>
                                </select> -->
                                <UseDropdown class="dropdown"
                                    :Options="new Map<boolean, string>([[true, '标准灵敏度'], [false, '高灵敏度']])"
                                    v-model="configuration.RCSThreshold" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="reset colorwhite" type="button"
                @click="BaseInformationComponent.Default.UpdateAsync(configuration)">
                <span>配置</span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import { reactive } from 'vue';
import { BaseInformationComponent, UsageComponent } from './MMWRComponent';
import UseDropdown from './UseDropdown.vue';

const configuration = reactive(new ClientMessage.MillimeterWaveRadarBaseConfiguration(
    false, false, false, false, false, false, false, false, false, false,
    true, 0, 1, 200, 0, true, true, false, 0, false
));
</script>

<style scoped>
.base-configuration {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    backdrop-filter: blur(1rem);
}

.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: 76rem;
    height: 84rem;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    border-radius: 2rem;
    border: solid 0.6rem transparent;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.header {
    width: 100%;

    padding: 2rem;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.header>span:first-of-type {
    color: white;
    font-size: 2.4rem;
    font-weight: 500;
}

.header>.material-icons {
    color: #81859C;
    font-size: 3.6rem;
}

.header>span:last-of-type {
    margin-left: auto;
}

.content {
    padding-left: 4rem;
    padding-right: 4rem;
}

table {
    width: 100%;

    border-collapse: separate;
    border-spacing: 0 1.5rem;
}

thead {
    position: relative;
}

thead::after {
    content: '';

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 0.1rem;

    background-color: #81859C1A;
}

th,
td {
    height: 4rem;
    font-size: 1.6rem;
}

th {
    color: #81859C;
}

td {
    color: #B1B1D4;
}

th:nth-of-type(1) {
    width: 40%;
    text-align: left;
}

th:nth-of-type(2) {
    width: 10%;
}

th:nth-of-type(3) {
    width: 50%;
}

td {
    position: relative;
}

td>input,
td>label,
td>.dropdown {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dropdown {
    width: 24rem;
}

td>input {
    border: none;
    outline: none;

    color: #81859C;
    font-size: 1.6rem;

    width: 24rem;
    height: 3.6rem;
    padding-left: 1.5rem;

    border-radius: 0.6rem;
    border: 0.1rem solid #36384B;

    background-color: transparent;
}

td>input:hover {
    border: solid 0.1rem;
    border-image: linear-gradient(90deg, rgba(128, 125, 225, 1), rgba(33, 140, 222, 1)) 1 1;
}

td>input::-webkit-inner-spin-button,
td>input::-webkit-outer-spin-button {
    display: none;
}

button {
    width: 25rem;
    height: 10rem;

    margin: auto;

    background-image: url('/static/MMWR/btn-bg.png');
    background-repeat: no-repeat;
    background-position-y: -0.5rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
}

button>span {
    display: inline-block;

    color: white;
    font-size: 3rem;

    text-indent: 1em;
    letter-spacing: 1em;
}
</style>